<template>
    <div>
        <div class="wallet-tixian"
        :style="{'background-image':'url('+require('@/assets/images/walletbg@2x.png')+')'}">
            <div>
                <p>账户余额（元）</p>
                <span class="account">&yen;{{walletData.bal}}</span>
            </div>
            <van-button type="primary" @click="(()=>{this.$router.push({name:'withdraw'})})">提现</van-button>
        </div>
        <van-tabs v-model="active" sticky animated>
            <van-tab v-for="(item,index) in tabTitle" :title="item" :key="index">
                <account :acctRec="walletData.acct_rec" v-if="index==0" />
                <withdraw-list :cashRec="walletData.cash_rec" v-if="index==1" />
            </van-tab>
        </van-tabs>
    </div>
</template>
<script>
import {myWallet} from '@/api/mine.js';
import {mapGetters} from 'vuex';
export default {
    data() {
        return {
            tabTitle:['账户明细','提现明细'],
            active:0,

            walletData:{}
        }
    },
    computed: {
        ...mapGetters(['userId']),
    },
    mounted() {
        myWallet({
            user_id:this.userId
        }).then(res=>{
            // eslint-disable-next-line
            console.log(res)
            this.walletData = res
        })
    },
    components: {
        Account:()=>import('./components/Account'),
        WithdrawList:()=>import('./components/WithdrawList')
    }
}
</script>
<style lang="less" scoped>
.wallet-tixian{
    display: flex;
    align-items: center;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 10px;
    padding: 40px 20px;
    color: white;
    justify-content: space-between;
    line-height: 2.2em;
    border-radius: @border-radius;
    .account{
        font-size: 28px;
    }
    button{
        background: white;
        color: @first-color;
        height: 32px;
        line-height: 30px;
        width: 80px;
    }
}
</style>